<html>
  <head>
    <meta charset="UTF-8">

    <script src="tsc/viewer.js"></script>
    <link rel="stylesheet" href="viewer.css">

    <title>iOS Documents Statistics Viewer</title>
  </head>
  <body id="drop_target">
    <div id="report_upload">
      <div>
        <div id="centered_large_icon">
          🔍 📂
        </div>

        <div id="instructions">
          <h1>
            Drag and drop your .json report onto this page to get started.
          </h1>
          <input type="file" id="report_file_input" accept=".json">
        </div>

        <div id="footer">
          <h3>For more information, see the <a href="./README.md">README</a></h3>
        </div>
      </div>
    </div>

    <h1 id="loading" hidden></div>Loading, please wait...</h1>

    <div id="viewer" hidden>
      <div id="infobar">
        <span>Current root: <span id="root_path"></span></span>
        <span class="spacer"></span>
        <span>File: <span id="local_file"></span></span>
      </div>
      <hr/>
      <div id="toolbar">
        <span>Search: <input id="searchbar" type="text"></input></span>
        <span class="spacer"></span>
        <span>
          <button id="nav_up">Navigate Up One Directory</button>
          <button onclick="window.location.hash='#'">Reset to Root Directory</button>
        </span>
        <span class="spacer"></span>
        <span>
          <button onclick="collapseAllDirectories()">Collapse All</button>
          <button onclick="expandAllDirectories()">Expand All</button>
        </span>
        <span class="spacer"></span>
        <span>
          Sorting:
          <select id="sorting">
            <option value="nameAsc">Name A->Z</option>
            <option value="nameDesc">Name Z->A</option>
            <option value="sizeAsc">Smallest -> Largest</option>
            <option value="sizeDesc">Largest -> Smallest</option>
            <option value="accessedAsc">Accessed Most Recently</option>
            <option value="accessedDesc">Accessed Least Recently</option>
          </select>
        </span>
      </div>
      <hr/>
      <br/>
      <div id="contents">
        <div class="item_row header_row">
          <span class="item_icon"></span>
          <span class="item_spacing"></span>
          <span class="item_name">Name</span>
          <span class="item_size">Size</span>
          <span class="item_accessed">Accessed</span>
          <span class="item_created">Created</span>
          <span class="item_modified">Modified</span>
        </div>
      </div>
    </div>
  </body>
</html>
